<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../public/elementUI/elementUI.css">
    <!-- 引入组件库 -->
    <script src="../public/elementUI/elementUI.js"></script>
    <!-- 引入样式 -->
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
    <!-- 引入 基础CSS -->
    <link href="../public/css/bascis.css" rel="stylesheet" type="text/css" />
    <!-- 引入 footer  CSS -->
    <link href="../public/css/footer.css" rel="stylesheet" type="text/css" />
    <!-- 引入header css -->
    <link href="../public/css/header.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="content">
                <div class="left">
                    <img src="./images/ctrlD.png" width="20px" height="20px">
                    <a href="javascript:void(0);" rel="sidebar" onclick="AddFavorite('全球华人充值第一平台', location.href)">
                        <a style="color: red;"><b>Ctrl+D</b></a> <a>收藏本站</a>
                    </a>
                </div>
                <div class="mid">
                    <a href="#">华人服务商城APP</a>
                </div>
                <div class="right">
                    <!-- 登录 -->
                    <div class="login" v-if="isLogin">
                        <a @click="gotoHome" style="color: #00d7c8;">{{user.email}}</a> | <a @click.stop="logOut">退出</a>
                    </div>
                    <!-- 未登陆 -->
                    <div class="noLogin" v-if="!isLogin">
                        <a @click="gotoLogin">注册</a> | <a @click="gotoLogin">登录</a>
                    </div>

                </div>
            </div>
        </div>
        <div style="height: 40px;"></div>
        <div class="mid-content">
            <!-- 搜索框 -->
            <div class="search">
                <div class="img">
                    <h3><img src="../public/image/logo.png"></h3>
                </div>
                <div class="search-input">
                    <input placeholder="search"><button><i class="el-icon-search"></i></button>
                </div>
            </div>

        </div>
        <div class="center">
            <div class="title">
                <span>购物车</span>
                <span>Shopping Cart</span>
            </div>
            <div class="context">
                <table>
                    <tr>
                        <th>产品名称</th>
                        <th>充值规格</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>{{order.pname}}</td>
                        <td>{{order.price+'元'}}</td>
                        <td>
                            <el-input-number v-model="order.sum" :min="1" :max="10" label="选择数量"></el-input-number>
                        </td>
                        <td>USD$ 17.75</td>
                        <td><span class="close">X</span></td>
                    </tr>
                </table>
            </div>
            <div class="title">
                <span>递送信息</span>
                <span>Information</span>
            </div>
            <div class="context">
                <div class="row">
                    <span>
                        <input class="slide-up" v-model="pname" style="text-indent: 120px;" type="text"
                            placeholder="请输入充值产品名称" /><label for="card">充值产品名称</label>
                    </span>
                    <br />
                    <span>
                        <input class="slide-up" v-model="contact" style="text-indent: 165px;" type="text"
                            placeholder="请输入联系方式" /><label for="expires">联系方式(QQ/微信)</label>
                    </span>

                </div>
            </div>
            <div class="title">
                <span>联系方式</span>
                <span>Contact</span>
            </div>
            <div class="context">
                <div class="row">
                    <span>
                        <input class="slide-up" v-model="name" style="text-indent: 90px;" id="artist" type="text"
                            placeholder="请输入客户名称" /><label for="artist">客户名称</label>
                    </span>
                    <span>
                        <input v-model="email" class="slide-up" style="text-indent: 90px;" type="text"
                            placeholder="请输入邮箱" /><label for="eyes">客户邮箱</label>
                    </span>
                    <span>
                        <input v-model="tel" class="slide-up" style="text-indent: 90px;" type="text"
                            placeholder="请输入手机号码" /><label for="eyes">手机号码</label>
                    </span>
                    <div class="more-lianxi">
                        <span> 其他联系方式</span>
                        <el-input placeholder="请输入内容" v-model="mContact" class="input-with-select">
                            <el-select v-model="select" slot="prepend" placeholder="请选择">
                                <el-option label="QQ" value="1"></el-option>
                                <el-option label="微信" value="2"></el-option>
                                <el-option label="Skype" value="3"></el-option>
                                <el-option label="旺旺" value="3"></el-option>

                            </el-select>

                        </el-input>

                    </div>
                </div>
            </div>
            <div class="title">
                <span>支付方式</span>
                <span>Pay</span>
            </div>
            <div class="context">
                <span class="image">
                    <img src="./images/pay.jpg" height="45px" />
                    <div class="select"></div>
                </span>
                <div class="tip">
                    <p>1.支持信用卡(VISA\Master)进行支付；</p>
                    <p>2.接受USD、CAD、AUD、GBP、EUR、JPY等全球多币种结算；</p>
                    <p>3.选择本支付您的账单信息将显示由alfyhome supplies扣款；</p>
                    <p>4.有手续费。</p>
                </div>
            </div>
            <div class="bottom-total">
                <div class="total">
                    <table>
                        <tr>
                            <th>购物车金额:</th>
                            <td>{{total+'元'}}</td>
                        </tr>
                        <tr>
                            <th>支付手续费:</th>
                            <td>10元</td>
                        </tr>
                        <tr>
                            <th>支付总额:</th>
                            <td style="font-size: 24px; font-weight: bold;">{{(total+10)+'元'}}</td>
                        </tr>
                    </table>
                </div>
                <h5>
                    <p><span>合计:</span><i> {{total+10}}</i><span>元</span></p>
                </h5>
            </div>
            <div class="bottom-btn">
                <div class="btn" @click="gotoPay">
                    去下单
                </div>
            </div>
        </div>
        <footer>
            <div class="center">
                <div class="introduce">
                    <div class="logo">
                        <img src="../public/image/logo.png" height="80px">
                    </div>
                    <p>
                        10HKA网站隶属拾小时娱乐有限公司，本公司深耕互联网行业，作为服务平台，10HKA励志服务于全球华人，以“团结、友爱、互助、互信”为公司发展理念。如果您在购物中有任何疑问，请及时联系我们
                    </p>
                    <p><span>QQ:</span>2677950874</p>
                    <p><span>邮箱:</span>2677950874@qq.com</p>
                </div>
                <div>
                    <ul>
                        <li>关于我们</li>
                        <li>公司介绍</li>
                        <li>隐私政策</li>
                        <li>条款与条件</li>
                    </ul>
                    <ul>
                        <li>购物指南</li>
                        <li>免费注册</li>
                        <li>购物流程</li>
                        <li>条款与条件</li>
                    </ul>
                    <ul>
                        <li>支付方式</li>
                        <li>支持的货币</li>
                        <li>支付方式</li>
                        <li>Paypal认证</li>
                        <li>Paypal注册</li>
                    </ul>
                    <ul>
                        <li>帮助信息</li>
                        <li>发货流程</li>
                        <li>退款政策</li>
                    </ul>
                </div>

            </div>
            <div class="my-footer">
                <p> © 2005-2021 www.okpayka.com 版权所有，并保留所有权利</p>
                <div>
                    <img src="../public/image/footer/163.jpg" />
                    <img src="../public/image/footer/Apple.jpg" />
                    <img src="../public/image/footer/Booking.jpg" />
                    <img src="../public/image/footer/ctrip.jpg" />
                    <img src="../public/image/footer/PayPal.jpg" />
                </div>
            </div>

        </footer>
    </div>
</body>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            price: 100, //商品价格
            num: 1, //选择数量
            mContact: '', //更多联系方式
            select: '', //选择的联系方式  
            pname: '', //充值产品名称
            contact: '', //联系方式QQ或微信
            name: '', //客户姓名
            email: '', //客户邮箱
            tel: '', //手机号
            isLogin: false, //是否登录
            user: null, //登录的用户信息

            order: { //订单信息
                id: '', //订单Id
                pname: '', //商品名
                price: '', //商品价格
                sum: '', //商品数量
                img: '', //商品图片
            }
        },

        mounted() {
            this.checkLogin()
            this.getProInfo()
           

        },
        computed: {
            total() {
                return this.order.price * this.order.sum
            }


        },

        methods: {
            handleSelect() {

            },
            //获取商品信息
            getProInfo() {
                const params = decodeURI(window.atob(window.location.href.split("?")[1])).split("&")[0].split(
                    '=')[1]
                this.order = JSON.parse(params)
                console.log(JSON.parse(params));
            },

            gotoHome() {
                window.location.href = "../home"
            },
            //检查是否登录
            checkLogin() {
                this.user = JSON.parse(localStorage.getItem('user'))
                if (this.user !== null) {
                    this.isLogin = true
                } else {
                    this.isLogin = false
                    this.gotoLogin()
                }

            },
            //去登陆
            gotoLogin() {
                window.location.href = '../login'
            },
            //退出登录
            logOut() {
                localStorage.removeItem('user')
                this.isLogin = false
                this.user = null
                this.gotoLogin()
            },
            //去下单
            gotoPay() {
                if (this.pname == '') {
                    this.$message({
                        message: '请输入充值产品名称',
                        type: 'warning',
                        offset: 50
                    });
                } else {
                    if (this.contact == '') {
                        this.$message({
                            message: '请输入联系方式',
                            type: 'warning',
                            offset: 50
                        });
                    } else {

                        if (this.name == '') {
                            this.$message({
                                message: '请输入客户名称',
                                type: 'warning',
                                offset: 50
                            });
                        } else {
                            const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

                            if (!regEmail.test(this.email)) {
                                this.$message({
                                    message: '请输入正确的邮箱',
                                    type: 'warning',
                                    offset: 50
                                });
                            } else {
                                const regTel =
                                    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                                if (!regTel.test(this.tel)) {
                                    this.$message({
                                        message: '请输入正确的手机号',
                                        type: 'warning',
                                        offset: 50
                                    });
                                } else {


                                    //所有验证通过
                                    const userList = JSON.parse(localStorage.getItem("userList"))
                                    const user = JSON.parse(localStorage.getItem("user"))

                                    userList.forEach(userItem => {
                                        if (userItem.email == this.user.email) {
                                            userItem.order.push(this.order)
                                            user.order.push(this.order)

                                            this.$message({
                                                message: '添加成功',
                                                type: 'success',
                                                offset: 50
                                            });
                                            localStorage.setItem("userList", JSON.stringify(userList))
                                            localStorage.setItem("user", JSON.stringify(user))


                                        } else {
                                            this.$message({
                                                message: '添加失败',
                                                type: 'error',
                                                offset: 50
                                            });
                                        }
                                    });


                                }
                            }
                        }
                    }
                }
            }
        },

    })
</script>

</html>